<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <script type="text/javascript">
            const siteUrl = "./",
                musicMp3 = "media/bgm.mp3"
        </script>

        <link rel="stylesheet" href="css/music.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css" type="text/css" />
	</head>
	<body>

        <div class="page flex center content show" id="record">
            <img class="tree-content" src="images/top_left_tree_content.png" alt="" />
            <div class="poster-make-box">
                <img class="poster-card friend" src="images/poster_card1.png" alt="" />
                <div class="friend-box">
                    <div class="friend-img-box"><img src="images/user_demo_img.jpg" width="100%" alt="" /></div>
                    <div class="friend-play-btn"></div>
                    <img class="playing-icon" src="images/playing_icon.png" alt="" />
                    <p>孟毛毛</p>
                    <img src="images/friend_text.png" alt="" />
                </div>
                <a class="make-poster-btn" href="index.html"><img src="images/friend_poster_text.png" width="100%" alt="" /></a>
            </div>
            <div class="recording-box">
                <img class="record-sound" src="images/record_sound_img.png" alt="" />
                <div class="recording-timer">正在录制,剩余<span id="timer">30</span>秒</div>
            </div>
        </div>


        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/music.js"></script>
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script type="text/javascript">
            // wx.config({
            //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //     appId: '', // 必填，公众号的唯一标识
            //     timestamp: Math.random(), // 必填，生成签名的时间戳
            //     nonceStr: '', // 必填，生成签名的随机串
            //     signature: '',// 必填，签名
            //     jsApiList: ['startRecord','stopRecord','playVoice','onVoicePlayEnd'] // 必填，需要使用的JS接口列表
            // });

            $(document).ready(function (e) {
                $('.friend-play-btn').bind('touchstart',function (e) {
                    e.preventDefault();
                    $(this).addClass('playing');
                    $('.playing-icon').show();
                    setTimeout(function (){
                        $('.friend-play-btn').removeClass('playing');
                        $('.playing-icon').hide();
                    },3000);
                    // wx.playVoice({
                    //     localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
                    // });
                    // wx.onVoicePlayEnd({
                    //     success: function (res) {
                    //         var localId = res.localId; // 返回音频的本地ID
                    //         $(this).removeClass('playing');
                    //         $('.playing-icon').hide();
                    //     }
                    // });
                })
            });
        </script>
	</body>
</html>
